import { findIndex } from '../../common/helpers/util'
const name = 'grimm-select'
const EVENT_CHANGE = 'change'
const EVENT_INPUT = 'input' // only used for v-model
const EVENT_PICKER_SHOW = 'picker-show'
const EVENT_PICKER_HIDE = 'picker-hide'

export default {
  name,
  data() {
    return {
      active: false
    }
  },
  props: {
    options: {
      type: Array,
      default() {
        /* istanbul ignore next */
        return []
      }
    },
    value: null,
    placeholder: {
      type: String,
      default: ''
    },
    autoPop: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    cancelTxt: {
      type: String,
      default: ''
    },
    confirmTxt: {
      type: String,
      default: ''
    }
  },
  computed: {
    adaptOptions() {
      return [this.options.map(item => {
        if (typeof item !== 'object') {
          item = {
            value: item,
            text: item
          }
        }
        return item
      })]
    },
    valueIndex() {
      const val = this.value
      const index = findIndex(this.adaptOptions[0], (item) => {
        return item.value === val
      })
      this.picker && this.picker.setData(this.adaptOptions, index !== -1 ? [index] : [0])
      return index
    },
    selectedIndex() {
      return this.valueIndex !== -1 ? [this.valueIndex] : [0]
    },
    selectedText() {
      return this.valueIndex !== -1 ? this.adaptOptions[0][this.valueIndex].text : ''
    },
    _placeholder() {
      return this.placeholder || ''
    },
    _title() {
      return this.title || ''
    },
    _cancelTxt() {
      return this.cancelTxt || '取消'
    },
    _confirmTxt() {
      return this.confirmTxt || '确认'
    }
  },
  created() {
    this.picker = this.$createPicker({
      $props: {
        title: '_title',
        data: 'adaptOptions',
        selectedIndex: 'selectedIndex',
        cancelTxt: '_cancelTxt',
        confirmTxt: '_confirmTxt'
      },
      $events: {
        select: 'selectHandler',
        cancel: this.hided
      }
    })
    this.autoPop && this.showPicker()
  },
  methods: {
    showPicker() {
      if (this.disabled) {
        return
      }
      this.picker.show()
      this.active = true
      this.$emit(EVENT_PICKER_SHOW)
    },
    hided() {
      this.active = false
      this.$emit(EVENT_PICKER_HIDE)
    },
    selectHandler(selectedVal, selectedIndex, selectedText) {
      this.hided()
      if (selectedVal[0] !== this.value) {
        this.$emit(EVENT_INPUT, selectedVal[0])
        this.$emit(EVENT_CHANGE, selectedVal[0], selectedIndex[0], selectedText[0].text)
      }
    }
  },
  render(h) {
    const clz = [name]
    if (this.active) {
      clz.push('grimm-select_active')
    }
    if (this.disabled) {
      clz.push('grimm-select_disabled')
    }
    let node
    if (this.selectedText) {
      node = h('span', { 'class': `${name}-text` }, this.selectedText)
    } else {
      node = h('span', { 'class': `${name}-placeholder` }, this._placeholder)
    }
    return h('div', { 'class': clz, on: { click: this.showPicker } }, [
      node,
      h('i', { 'class': 'grimm-select-icon' })
    ])
  }
}
